<template>
  <div class="demo-checkbox">
    <div class="demo-card-pane">
      <h3>Checkbox</h3>
      <cv-checkbox label="复选框" v-model="val[0]"></cv-checkbox> {{ val[0] }}
    </div>

    <div class="demo-card-pane">
      <h3>Checkbox value值</h3>
      <cv-checkbox label="复选框" v-model="val[1]" trueValue="Y" falseValue="F"></cv-checkbox> {{ val[1] }}
    </div>

    <div class="demo-card-pane">
      <h3>Checkbox 复选框组</h3>
      <cv-checkbox-group v-model="val[2]">
        <cv-checkbox label="全选" checkboxForAll></cv-checkbox>
        <cv-checkbox val="one">
          <template v-slot="{ status, checked, click }">
            <span @click="click">
              <cv-checkbox-inner :checkStatus="status" /><span>自定义插槽</span>
              <span v-if="checked">{{ status }}</span>
            </span>
          </template>
        </cv-checkbox>
        <cv-checkbox val="two" label="选项二"></cv-checkbox>
        <cv-checkbox val="three" label="选项三"></cv-checkbox>
      </cv-checkbox-group>
      {{ val[2] }}
    </div>

    <div class="demo-card-pane">
      <h3>Checkbox 复选框组 样式</h3>
      <cv-checkbox-group v-model="val[3]" status="error" size="mini">
        <cv-checkbox label="全选" checkboxForAll></cv-checkbox>
        <cv-checkbox val="one" label="选项一"></cv-checkbox>
        <cv-checkbox val="two" label="选项二"></cv-checkbox>
        <cv-checkbox val="three" label="选项三"></cv-checkbox>
      </cv-checkbox-group>
      {{ val[3] }}
    </div>

    <div class="demo-card-pane">
      <h3>Checkbox 复选框组 disabled</h3>
      <cv-checkbox-group v-model="val[4]" disabled>
        <cv-checkbox label="全选" checkboxForAll></cv-checkbox>
        <cv-checkbox val="one" label="选项一"></cv-checkbox>
        <cv-checkbox val="two" label="选项二"></cv-checkbox>
        <cv-checkbox val="three" label="选项三"></cv-checkbox>
      </cv-checkbox-group>
      {{ val[4] }}
    </div>
  </div>
</template>

<script>
export default {
  name: "demo-checkbox",
  data() {
    return {
      val: {}
    };
  }
};
</script>

<style>
</style>